<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>签到</title>
<link rel="stylesheet" href="/Public/projects/meeting/css/signedbase.css">
</head>
<body>
<audio autoplay controls loop preload="auto" src="<?php
    if($sign && $sign['back_music']){
        echo $sign['back_music'];
    }else{
        echo '/Public/projects/meeting/images/bgm.mp3';
    }
?>" style="visibility:hidden" class="bgm"></audio>
<div class="indexBg" style="<?php
    if($sign && $sign['back_img']){
        echo 'background:url(' . $sign['back_img'] . ') no-repeat;height:100vh; position:absolute; top:0px; background-size:cover;display: flex; align-items:center; margin:0 auto; z-index:10;width:100%';
    }

?>"><div class="indexfont" style="<?php
    if($sign && $sign['back_text']){
        echo 'width:1200px; height:296px; background:url(' . $sign['back_text'] . ') no-repeat center center;';
    }
?>"></div></div>
<div class="indexCOverBg" style="<?php
    if($sign && $sign['end_img']){
        echo 'background:url(' . $sign['end_img'] . ') no-repeat;height:100vh; position:absolute; top:0px; background-size:cover;display: none; align-items:center; margin:0 auto; z-index:10;width:100%';
    }else{
        echo 'background:url(/Public/projects/meeting/images/indexBg.jpg) no-repeat;height:100vh; position:absolute; top:0px; background-size:cover;display: none; align-items:center; margin:0 auto; z-index:10;width:100%';
    }
?>"><div class="indexfontfinish" style="display: none"></div></div>
<div class="vediowrap" style="display: none">
    <video id="video1" src="<?php
    if($sign && $sign['back_video']){
        echo $sign['back_video'];
    }else{
        echo '/Public/projects/meeting/images/bg.mp4';
    }
    ?>" autoplay loop >
    </video>
    <video id="video2" src="<?php
    if($sign && $sign['back_video']){
        echo $sign['back_video'];
    }else{
        echo '/Public/projects/meeting/images/bg.mp4';
    }
    ?>" autoplay loop>
    </video>
    <canvas id="canvas" >
    </canvas>
</div>
   <div id="wrap" style="display: none">
     <span class="spanTitle"></span>
         <div class="divSignedArea" >
            <ul class="commentArea">
              <!--<span class="commentBg"></span>-->
                <?php foreach($users as $user){
                    echo "<li class='divcomment'><img src='" . $user['wx_img'] . "'><div class='comment'><span class='triangle'></span>";
                        if($user['wish'] == ''){
                            echo $sign['wish'];
                        }else{
                            echo $user['wish'];
                        }
                    echo "</li>";
                }?>
            </ul>
            <ul class="divLeft">

            </ul>
        </div>
        <div class="grid"></div>
        <div class="well">
        </div>
</div>
<script src="/Public/projects/meeting/js/jquery-1.9.1.min.js"></script>
<script src="/Public/projects/meeting/js/common_sign.js"></script>
<script src="/Public/projects/meeting/js/data.js"></script>
<script src="/Public/projects/meeting/js/main.js"></script>
<script src="/Public/projects/meeting/js/jquery.easing.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var meetId = "<?php echo I('get.meetId', '', '');?>";
    var code = 0;
    var timer = setInterval(sign_update, 5000);
    var wish = "{$sign['wish']}";
    function sign_update(){
        $(function() {
            $.ajax({
                url:"/Wap/Meeting/sign_update?meetId=" + meetId,
                data:{
                    meetId: meetId,
                    code: code
                },
                type:"post",
                dataType:"json",
                success:function(res) {
                    if(res.code==10000){
                        //--封面隐藏--
                        code = res.code;
                        $(".indexBg").css("display", "none");
                        $(".vediowrap").css("display", "block");
                        $("#wrap").css("display", "block");
                    }else if(res.code==20000){
                        //--显示签到人员--
                        code = res.code;
                        comment(res.user);
                    }else if(res.code==30000){
                        //--翻转效果--
                        code = res.code;
                        $(".divLeft li").remove();
                        var users = res.users;
                        for(var i = 0; i < users.length; i++)
                        {
                            $(".grid").append("<div class='imagesList'><img src='" + users[i]['wx_img'] + "'/><p class='imglistName'>" + users[i]['query_value1'] + "</p></div>");
                        }
                        $(".divSignedArea").fadeOut("slow").delay(800).promise().done(function(){
                            show();
                        });
                    }else if(res.code==40000){
                        //--翻转效果结束--
                        code = res.code;
                        storm();
                    }else if(res.code==50000){
                        //--签到结束--
                        code = res.code;
                        clearInterval(timer);
                        $(".commentArea").css("display", "none");
                        $(".grid").css("display", "none");
                        $(".well").css("display", "block");
//                        $(".well").addClass("fadein");
                        end(res.users);
                    }
                }
            });
        });
    }
    function comment(user){
        if(user['wish'] == ''){
            $(".commentArea").prepend("<li class='divcomment'><img src='" + user['wx_img'] + "'><div class='comment'><span class='triangle'></span>" + wish +"</div></li>");
        } else{
            $(".commentArea").prepend("<li class='divcomment'><img src='" + user['wx_img'] + "'><div class='comment'><span class='triangle'></span>" + user['wish'] + "</div></li>");
        }
        $(".divLeft").append("<li class='divPerson'> <div class='ray'></div> <div class='imgperson'><img  class='imgHead' src='" + user['wx_img'] + "'><p class='pName'>" + user['query_value1'] + "</p></div></li>");
        var commentli=$(".commentArea li").length;
        if(commentli>10){
            $(".commentArea li:gt(5)").remove();
        }
    }

</script>
<script type="text/javascript">
    $(function(){

        var video1 = $("#video1")
        var video2 = $("#video2")

        var canvas = $("#canvas")

        var canvas2d = canvas[0].getContext('2d')

        var vW =  $(window).get(0).innerWidth;
        var vH = $(window).get(0).innerHeight;

        var video1Visible = false,video2Visible = false
        var first = true
        canvas.attr("width",$(window).get(0).innerWidth);//设置canvas宽度
        canvas.attr("height",$(window).get(0).innerHeight);//设置canvas高度
        video1.on('playing',function(e){
            if(first){
                first = false;
                video1[0].pause();
                setTimeout(()=>{
                    video1[0].play();
                    video1Visible = true;
                }, 100);
                return
            }
            if(!video2Visible)
                video1Visible = true;
        })

        video2.on('playing',function(e){
            console.log('video2 playing')
            if(!video1Visible)
                video2Visible = true
        })

        function step(){

            if(video1Visible){
                if(video1[0].currentTime > 9.95){
                    video1Visible = false
                }

                canvas2d.drawImage(video1[0], 0, 0, vW, vH)
            }

            else if(video2Visible){

                if(video2[0].currentTime > 9.95){
                    video2Visible = false
                }

                canvas2d.drawImage(video2[0], 0, 0, vW, vH)
            }


            requestAnimationFrame(step)
        }

        step()

    })

</script>
</body>
</html>